<template>
  <Dialog 
    :visible="visible"
    :width="600"
    :title="'录入比分'"
    :cancelText="'取消'"
    :sureText="'确认'"
    v-on:cancel="visible = false"
    v-on:confirm="scoreWrite"
    v-on:close="visible = false">
    <div class="score-box clearfix">
      <div class="score-left">
        <ul class="score-table">
          <li>项目</li>
          <li>对阵双方</li>
          <li class="clearfix" v-bind:style="{height:sHeight +'px'}">
            <div class="fl every" v-bind:style="{lineHeight: gameLength*scoreList.length +'px'}">
              每盘比分
            </div>
            <ul class="fl number">
              <li v-for="(item,index) in scoreList" :key="item"
                v-bind:style="{lineHeight: gameLength + 'px'}">
                {{index+1}}
              </li>
            </ul>
          </li>
          <li style="height:62px;">结果</li>
        </ul>
      </div>
      <div class="score-right">
        <ul class="score-table">
          <li class="match-type">{{matchType}}</li>
          <li>
            <el-row class="player">
              <el-col  :span="12" class="bordered">
                {{host}}
              </el-col>
              <el-col :span="12">
                {{guest}}
              </el-col>
            </el-row>
          </li>
          <li v-bind:style="{height:sHeight +'px'}">
            <el-row class="small-score"
              v-for="(item,index) in totalDish" :key="item" 
              v-bind:style="{lineHeight: gameLength + 'px'}"
              v-bind:class="{borderb: index != (totalDish.length-1)}">
              <el-col :span="12" class="bordered">
                {{item.hostScore}}
              </el-col>
              <el-col :span="12">
                {{item.guestScore}}
              </el-col>
            </el-row>                 
          </li>
          <li>
            <span class="big-score">{{3}}:{{0}}</span>
          </li>
        </ul>
      </div>
    </div>          
  </Dialog>
</template>

<script>
import Dialog from '../../components/Dialog'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    matchType: {
      type: String
    },
    host: {
      type: String
    },
    guest: {
      type: String
    },
    totalDish: { // 总盘(局)数
      type: Number
    },
    scoreList: {
      type: Array
    }
  },
  components: {
    Dialog
  },
  computed: {
    winDish () { // 胜利所需盘数
      return this.totalDish > 1 ? (this.totalDish + 1) / 2 : 1
    },
    sHeight () {
      let h
      if (this.scoreList.length === 3) {
        h = 295
      } else if (this.scoreList.length === 5) {
        h = 295
      } else if (this.scoreList.length === 7) {
        h = 343
      }
      return h
    },
    gameLength () {
      let h
      if (this.scoreList.length === 3) {
        h = 97
      } else if (this.scoreList.length === 5) {
        h = 59
      } else if (this.scoreList.length === 7) {
        h = 49
      }
      return h
    }
  },
  data () {
    return {}
  },
  methods: {
    scoreWrite () {
      this.$emit('score', )
    }
  }
}
</script>

<style lang="scss">
@import '../../styles/scoreDetail.scss';
</style>
